<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{background-image:url("./src/images/yy.jpg");width:100%;height:721px;position:relative;}
        .main{position:absolute;top:100px;right:100px;background:#fff;width:400px;height:600px;padding-left:100px;}
        li{list-style:none;float:left;padding-right:50px;}
        ul{height:30px;color:#ccc;}
        .box{padding-left:20px;display:none;}
        #tel, #yzm, #uname, #upwd,#yzma{width:250px;height:33px;}
        #yzm1,#yzm2{background:#43a41b;width:100px;height:33px;border:0;color:#fff;}
        #btn1,#btn11{width:150px;height:33px;background:#43a41b;border-radius:5px;opacity:.8;color:#fff;}
        #btn2{width:80px;height:33px;background:#fff;color:#43a41b;border-radius:5px;margin:0 20px;}
        img{width:383px;height:179px;position:absolute;left:100px;top:300px;}

    </style>
    <script src="./src/js/jquery.js"></script>
    <script src="../src/js/cookie.tools.js"></script>
</head>
<body>
<div id="main">
    <div class="main">
        <ul>
            <li>手机号登录</li>
            <li>账号登录</li>
        </ul>
        <div class="box" style="display:block">
            <form>
                <p>
                    <input type="" placeholder="手机号" id="tel"/>
                </p>
                <p id="p1"></p>
                <p>
                    <input type="" placeholder="验证码" id="yzma"/>
                    <button id="yzm1" onclick="return false">获得验证码</button>
                </p>
                <p id="p2"></p>
                <p>
                    <input type="checkbox" checked="checked" class="z">记住手机号码
                </p>
                <p id="pp">
                    <button id="btn1" onclick="return false">登录</button>
                    <button id="btn2" onclick="return false">注册</button>
                </p>
            </form>
        </div>
        <div class="box">
            <form>
                <p>
                    <input type="" id="uname" placeholder="用户名"/>
                </p>
                <p id="p3"></p>
                <p>
                    <input type="password" id="upwd" placeholder="密码"/>
                </p>
                <p id="p4"></p>

                <p>
                    <input type="" placeholder="验证码" id="yzm"/>
                    <button id="yzm2" onclick="return false">获得验证码</button>
                </p>
                <p id="p5"></p>

                <p>
                    <input type="checkbox" checked="checked">记住用户名与密码
                </p>

                <p>
                    <button id="btn11" onclick="return false">登录</button>
                    <button id="btn2" onclick="return false">注册</button>
                </p>
            </form>
        </div>
        <img src="./src/images/qq.png" alt="">
    </div>
</div>

<script>
    $(function(){
        $("#main").find("li").on("click", function(){
            $index = $(this).index();
            //console.log($index);
            $(".box").eq($index).show().siblings(".box").hide()
        })

        $("#btn2").on("click", function(){
            window.location = "register.html"
        })

        function yzm(){
            return parseInt(Math.random() * 10) + String.fromCharCode(parseInt(Math.random() * 26) + 97) + parseInt(Math.random() * 1000)
        }

        $("#yzm1").on("click", function(){
            $(this).html(yzm())
        });

        $("#btn1").on("click",function(){

            var regutel=/^[1][3456789]\d{9}$/;
            if(regutel.test($("#tel").val())){
                $("#p1").html("")
            }else {
                $("#p2").html("手机号码错误")
                return false;
            }
            if($("#yzm").val()==$("#yzm1").html()){
                $("#p2").html("")
            }else {
                $("#p2").html("验证码输入错误")
            }

            if(confirm("登录成功")){
                window.location="indexx.html"
            }

            var strObj=JSON.parse(getCookieByName("a")||'[]')
            var obj={
                utel:$("#tel").val()
            }
            strObj.push(obj)
            setCookie("a",JSON.stringify(strObj),10)
        });

        function yzmq(){
            return parseInt(Math.random() * 10) + String.fromCharCode(parseInt(Math.random() * 26) + 97) + parseInt(Math.random() * 1000)
        }

        $("#yzm2").on("click", function(){
            $(this).html(yzmq())
        });
        
        $("#btn11").on("click",function(){
            if($("#yzm").val()==$("#yzm2").html()){
                $("#p5").html("")
            }else {
                $("#p5").html("验证码输入错误")
            }
            var strobj=JSON.parse(getCookieByName("origin")||'[]')
            obj={
                uname:$("#uname").val(),
                upwd:$("#upwd").val()
            }
            strobj.push(obj);
            setCookie("origin",JSON.stringify(strobj),10)
            if(confirm("登录成功")){
                window.location="indexx.html"
            }
        })

    })

</script>
</body>
</html>